<template>
	<el-config-provider :locale="locale" :size="config.size" :zIndex="config.zIndex" :button="config.button">
		<router-view></router-view>
	</el-config-provider>
</template>
<script setup lang="ts">
	// 引入系统状态管理
	const systemStore = useSystemStore()
	// 设置主题色的函数
	const config = ref({
		size: 'default',
		zIndex: 2000,
		button: {
			autoInsertSpace: false
		}
	})
	const locale = computed(() => (lang.global.messages as any)[lang.global.locale].el)
	// 设置主题色的函数
	const setColor = () => {
		// 获取本地存储中的 APP_COLOR
		const app_color = tool.data.get('APP_COLOR')
		// 如果有自定义颜色，则修改 Element Plus 的主题色
		if (app_color) {
			// 设置主颜色
			document.documentElement.style.setProperty('--el-color-primary', app_color)
			// 根据主颜色生成不同亮度的颜色并应用
			for (let i = 1; i <= 9; i++) {
				document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, color.lighten(app_color, i / 10))
			}
			// 根据主颜色生成不同深度的颜色并应用
			for (let i = 1; i <= 9; i++) {
				document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, color.darken(app_color, i / 10))
			}
		}
	}
	// 在组件挂载时，异步获取系统配置，并应用自定义主题色
	onMounted(async () => {
		// 获取系统全局站点信息
		await systemStore.getSite()
		// 获取系统全局配置
		await systemStore.getConfig()
		// 设置颜色
		setColor()
	})
</script>
<style lang="scss">
	@use '@/style/style.scss';
</style>
